@<template>
    <div class="login_content">
       
        <div class="login_box">
             <!-- 头像区域 -->
            <div class="avator_box">
                <img src="../assets/img/logo.png" alt="">
            </div>

            <!-- 账号密码区域 -->
         <el-form ref="loginFormRef" class="login-form" :model="loginForm" :rules="loginFormRules">
             <el-form-item prop="username">
                 <el-input prefix-icon="iconfont icon-user" v-model="loginForm.username" type="text"></el-input>
             </el-form-item>
             <el-form-item prop="password">
                 <el-input prefix-icon="iconfont icon-lock_fill" v-model="loginForm.password" type="password" ></el-input>
             </el-form-item>

             <el-form-item class="btns">
                 <el-button type="primary" @click="login">登录</el-button>
                 <el-button type="info" @click="resetForm">重置</el-button>
             </el-form-item>


        
        </el-form>
        </div>

        
    </div>

   
  
</template>

<script>

export default {
    data() {
       return {
            loginForm: {
            username: 'admin',
            password: '123456',
        },
        // 表单验证
        loginFormRules: {
            username:[
                {required: true, message:'请输入用户名', trigger:'blur'},
                {min:3, max: 10, message: '长度在3到10位之间', trigger: 'blur'}
            ],
            password:[
                {required: true, message:'请输入密码', trigger:'blur'},
                {min:6, max: 16, message: '长度在6到16位之间', trigger: 'blur'}
            ]
        }
       }
    },
    methods: {
        // 重置表单
        resetForm() {
            this.$refs.loginFormRef.resetFields();
        },
        // 表单预验证
        login() {
            this.$refs.loginFormRef.validate(async valid => {
                if(!valid) return
                const {data: res} = await this.$http.post('login',this.loginForm)
              
                if (res.meta.status != 200) return this.$message.error('登录失败');
                this.$message.success('登录成功...')
                //  sessionStorage中保存token 
                window.sessionStorage.setItem('token', res.data.token);

                setTimeout(() => {
                    // 通过函数式导航跳转到页面
                    this.$router.push('/home')
                },1000)
                
                

                
            })
        }
    }

}
</script>

<style lang="less" scoped>
.login_content {
    position: relative;
    background-color: #2b4b6b;
    height: 100%;


}
.login_box {
    width: 450px;
    height: 300px;
    background-color: #fff;
    border-radius: 5px;
    position:absolute;
    left: 50%;
    top:50%;
    transform: translate(-50%, -50%);
    .avator_box {
        width: 130px;
        height: 130px;
        border: 1px solid #eee;
        border-radius: 50%;
        padding: 5px;
        box-shadow: 0 0 5px rgba(0,0,0,.3);
        position: absolute;
        background-color: #fff;
        left: 50%;
        transform: translate(-50%, -50%);
        img {
            height: 100%;
            border-radius: 50%;
            background-color: #eee;
        }
    }

    
}

.login-form {
    padding: 0 20px;
    margin-top: 120px;
    .btns {
        display:flex;
        justify-content: flex-end;
    }
    
}



</style>>
